<template>
    <div>

        <el-dialog title="主机列表" :visible.sync="dialog_host_view" width="80%" :close-on-click-modal="false">
            <el-row>
                <el-col :span="16">
                    <!--<el-select v-model="host_zone" @change="zone_Search()" clearable placeholder="区域">-->
                    <!--<el-option v-for="item in zone_options" :key="item" :value="item"></el-option>-->
                    <!--</el-select>-->
                    <el-form :inline="true" :model="host_query">
                        <el-form-item>
                            <el-input v-model="host_query.name_field" clearable placeholder="主机名称"></el-input>
                        </el-form-item>
                        <el-select v-model="host_query.zone_field" @change="zone_Search()" clearable placeholder="区域">
                            <el-option v-for="item in zone_options" :key="item" :value="item"></el-option>
                        </el-select>

                        <el-form-item>
                            <el-button type="primary" icon="search" @click="get_hosts()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-table :data="hosts.data"  ref="multipleTable"  v-loading="hostLoading" @selection-change="handleSelectionChange"
                      @row-click="handleClickRow" style="width: 100%">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column prop="name" label="主机名称"></el-table-column>
                <el-table-column prop="zone" label="所属区域"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="ssh_ip" label="SSH连接"></el-table-column>
            </el-table>
            <!--主机列表分页-->
            <div class="pagination-bar" v-if="hosts.total > 10">
                <el-pagination
                        @current-change="hostCurrentChange"
                        :current-page="hostCurrentPage" layout="total, prev, pager, next"
                        :total="hosts.total">
                </el-pagination>
            </div>
            <div slot="footer">
                <el-button @click="dialog_host_view=false">取消</el-button>
                <el-button type="primary" @click="save_select_host">确定</el-button>
            </div>
        </el-dialog>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="从本地拉取到远端主机列表" name="first">
                <el-row>
                    <el-col :span="16">
                            <el-upload ref="upload" action="" :http-request="import_submit" name="file" :multiple="false"
                                       :file-list="fileList">
                                <el-button size="small" type="primary">点击上传文件</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传单个文件，而非目录，目录建议压缩成文件格式</div>
                             </el-upload>
                    </el-col>

                    <el-col :span="16">
                        <div style="margin: 10px 0">远端主机列表： </div>
                        <el-input disabled type="textarea" required placeholder="目标主机IP,多个用逗号分隔" v-model="selected_host">
                        </el-input>

                        <div style="margin: 10px 0">
                            <el-button @click="select_host_list">从主机列表中选择<i class="el-icon-plus el-icon--right"></i></el-button>
                        </div>
                    </el-col>
                </el-row>

                <div style="margin: 10px 0">远程目的服务器的保存目录，如/tmp: </div>
                <el-input prop="savepath" v-model="savepath" placeholder="请输入目的服务器的保存路径" ></el-input>
                <el-button type="primary" v-if="has_permission('assets_host_sftp_view')"
                               :disabled="is_disabled" @click="start_exec_sftp">开始执行</el-button>
                                友情提示：请耐心等待，机器数目越多，执行时间越长
                <div v-if="loading_picture" align="middle">
                     <img src="../../assets/loading.gif">
                </div>
                <el-dialog title="执行详情" style="width: 100%" :visible.sync="dialog_exec_detail_view1" :close-on-click-modal="false">
                            <pre>** 开始执行 **
                                <template v-for="line in exec_output">{{ line }}</template>
                            </pre>
                </el-dialog>
            </el-tab-pane>

            <el-tab-pane label="从远端主机列表拉取到指定服务器" name="second">
                <el-row>
                    <el-col :span="16">
                        <div style="margin: 10px 0">执行主机： </div>
                        <el-input disabled type="textarea" required placeholder="目标主机IP,多个用逗号分隔" v-model="selected_host">
                        </el-input>

                        <div style="margin: 10px 0">
                            <el-button @click="select_host_list">从主机列表中选择<i class="el-icon-plus el-icon--right"></i></el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-dialog visible title="目的端指定服务器的ssh连接信息" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
                    <el-form :model="form" label-width="80px">
                        <el-form-item label="SSH地址" prop="ssh_ip" required>
                            <el-input v-model="form.ssh_ip" placeholder="连接主机的SSH地址，例如：192.168.1.1"></el-input>
                        </el-form-item>

                        <el-form-item label="SSH端口" prop="ssh_port" required>
                            <el-input v-model="form.ssh_port" placeholder="主机的SSH端口，例如：22"></el-input>
                        </el-form-item>

                        <el-form-item label="用户名" prop="ssh_username" required>
                            <el-input v-model="form.ssh_username" placeholder="登录用户名"></el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="ssh_password" required>
                            <el-input v-model="form.ssh_password" placeholder="密码" type="password"></el-input>
                        </el-form-item>

                        <el-form-item  label="源端" prop="ssh_src_path" required>
                            即将拉取源端主机列表的配置文件，如/etc/my.cnf
                            <el-input v-model="form.ssh_src_path" placeholder="请输入要拉取源端文件的绝对路径名称" ></el-input>
                        </el-form-item>

                        <el-form-item  label="目的端" prop="ssh_dst_path" required>
                            指定目的服务器的保存目录，如/tmp
                            <el-input v-model="form.ssh_dst_path" placeholder="请输入目的服务器的保存目录" ></el-input>
                        </el-form-item>
                    </el-form>

                    <div slot="footer">
                        <el-button @click="dialogVisible=false">取消</el-button>
                        <el-button type="primary" @click="saveCommit" v-if="has_permission('assets_host_sftp_view')">开始执行</el-button>
                    </div>
                </el-dialog>

                <el-row>
                    <el-col :span="8"  style="text-align: right">
                        <el-button type="primary" @click="handleAdd">添加传输文件到目的端指定服务器的信息</el-button>
                    </el-col>
                </el-row>

                <div v-if="loading_picture" align="middle">
                     <img src="../../assets/loading.gif">
                </div>
                <el-dialog title="执行详情" style="width: 100%" :visible.sync="dialog_exec_detail_view" :close-on-click-modal="false">
                            <pre>** 开始执行 **
                                <template v-for="line in exec_output">{{ line }}</template>
                            </pre>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>



</template>

<script>
    export default {
        data () {
            return {
                dialog_host_view: false,
                fileList: [],
                filename:'',
                selected_host: '',
                hostLoading: true,
                dialogVisible:false,
                activeName:'first',
                hosts: [],
                hostCurrentPage:1,
                hostLoading:true,
                host_query: {
                    name_field: '',
                    zone_field: '',
                },
                zone_options: [],
                form:{
                    ssh_ip:'',
                    ssh_port: 22,
                    ssh_username: 'root',
                    ssh_password: '',
                    ssh_src_path:'',
                    ssh_dst_path:'',
                    hosts_list:''
                },
                exec_token: null,
                exec_output: [],
                selected_host_id: [],
                dialog_exec_detail_view: false,
                dialog_exec_detail_view1: false,
                import_loading: false,
                multipleSelection: [],
                savepath:'/tmp',
                loading_picture:false,
                rules: {
                    savepath: [
                        {required: true, message: '请输入路径', trigger: 'blur'}
                    ],
                }
            }
        },
        computed: {
            is_disabled() {
                return ! this.selected_host
            }
        },
        methods: {
            handleAdd (){
                this.dialogVisible = true
            },
            handleClick(tab, event) {
                if (tab.name === "second"){
                    console.log("second");
                }
            },
            saveCommit () {
                this.dialogVisible = false;
                this.loading_picture = true;
                this.form.hosts_list = this.selected_host_id;
                this.exec_output = [];
                this.$http.post(`/api/assets/hosts_sftp/pull_sftp`, this.form).then((res) => {
                    this.loading_picture = false;
                    this.dialog_exec_detail_view = true;
                    if (res.data.status == 0) {
                        this.$layer_message(res.data.msg,"error");
                        this.exec_output.push("Error: " + res.data.msg);
                        console.log(res.data);
                    } else if (res.data.status == 1){
                        this.exec_output.push(res.data.msg);
                    }},)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            zone_Search(){
                this.get_hosts();
            },
            //获取区域
            get_host_zone (){
                this.$http.get('/api/assets/hosts/zone/').then(res => {
                    this.zone_options = res.result
                }, res => this.$layer_message(res.result))
            },
            handleClickRow(row) {
                this.$refs.multipleTable.toggleRowSelection(row)
            },
            get_hosts (page) {
                if (!page) page = 1;
                this.hostLoading = true;
                let api_uri = '/api/assets/hosts/';
                this.$http.get(api_uri, {params: {page: page, host_query: this.host_query}}).then(res => {
                    this.hosts = res.result
                }, res => this.$layer_message(res.result)).finally(() => this.hostLoading = false)
            },
            select_host_list() {
                this.dialog_host_view = true;
                this.get_hosts();
                this.get_host_zone();
            },
            import_submit(data){
                this.import_loading = true;
                var upload_file = new FormData();
                upload_file.append('file', data.file);
                console.log(data.file.name);
                this.filename = data.file.name;
                this.$http.post(`/api/assets/hosts_sftp/import`, upload_file).then(res => {
                    this.import_loading=false;
                    this.$refs.upload.clearFiles();
                    this.$layer_message(res.data, 'success');
                }, res => this.$layer_message(res));
            },
            save_select_host() {
                let hosts = [], hosts_id = [];
                for (let v of this.multipleSelection) {
                    hosts.push(`${v.name}(${v.ssh_ip}:${v.ssh_port})`);
                    hosts_id.push(v.id);
                }
                this.selected_host_id = hosts_id;
                this.selected_host = hosts.toString();
                this.dialog_host_view = false;
            },
            hostCurrentChange(val) {
                this.hostCurrentPage = val;
                this.get_hosts(this.hostCurrentPage);
            },
            start_exec_sftp () {
                this.exec_output = [];
                this.loading_picture = true;
                let data = {hosts_id: this.selected_host_id, filename: this.filename,savepath: this.savepath};
                console.log(data);
                this.$http.post(`/api/assets/hosts_sftp/exec_sftp`,data).then(res => {
                    this.loading_picture = false;
                    this.dialog_exec_detail_view1 = true;
                    this.$layer_message(res.data,"success");
                    this.exec_output.push(res.data.msg);
                    //console.log(this.multipleSelection);
                });
            },
        },
    };
</script>